<template>
    <div style="margin: auto;background-image: url('https://rsms-golxen.oss-cn-shenzhen.aliyuncs.com/image/147526789.jpg');width: 100vw;height: 100vh">

        <el-form
                :rules="rules"
                label-width="70px"
                ref="dom"
                :model="checkAdmin"
                status-icon
                style="width: 366px;margin: auto;padding-top: 180px"
        >
            <el-form-item label="ID :" prop="id">
                <el-input v-model="checkAdmin.id" type="text"/>
            </el-form-item>

            <el-form-item label="密码 :" prop="password">
                <el-input v-model="checkAdmin.password" type="password"/>
            </el-form-item>

            <el-form-item label="验证码:" prop="mailCode">
                    <el-col :span="12"><el-input v-model="checkAdmin.mailCode" type="text" /></el-col>
                    <el-col :span="12">
                        <el-button v-if="isSend" class="cu-btn bg-green shadow" style="margin-left: 5%;width: 50%" disabled>{{ countdownTime }}s</el-button>
                        <el-button v-else type="success" style="margin-left: 5%;width: 50%" @click="sendMail()">发送验证码</el-button>
                    </el-col>

            </el-form-item>


            <el-form-item>
                <el-button :plain="true" type="primary" @click="submit(dom)"
                >登录
                </el-button>
                <el-button @click="reset(dom)">重置</el-button>
                <el-button type="primary"  link @click="()=>{router.push('/admin/register')}">注册</el-button>
            </el-form-item>
        </el-form>


    </div>

</template>


<script setup>

import {reactive, ref} from 'vue'
import request from "@/utils/request";
import {message} from "ant-design-vue";
import 'ant-design-vue/dist/antd.css'
import {useRouter} from "vue-router/dist/vue-router";
import {store} from "@/store";



const dom = ref()
const router = useRouter()

const checkAdmin = reactive({
    id: '',
    password: '',
    mailCode:''
})
const countdownTime=ref(0)
const isSend=ref(false)

const validateId = (rule, value) => {
    let re = /^\d+$/g
    if (value === '')
        return Promise.reject("ID不能为空")
    else if (!re.test(value))
        return Promise.reject("ID格式不正确")
    else
        return Promise.resolve()

}

const validatePassword = (rule, value) => {
    let re = /^(?!\d+$)(?![a-z]+$)[\da-z]+$/i
    if (value === '')
        return Promise.reject("密码不能为空")
    else if (!re.test(value))
        return Promise.reject("密码格式不正确")
    else
        return Promise.resolve()
}



const rules = reactive({
    id: [{validator: validateId, trigger: 'change'}],
    password: [{validator: validatePassword, trigger: 'change'}],
    mailCode:[{required: true, message: '请输入验证码' }]
})

const sendMail = () => {
    if (checkAdmin.id === '' || checkAdmin.password === '') {
        message.warning('账号和密码不能为空')
    } else {
        request.post("/store/loginUserOnSendMail", checkAdmin).then(res => {
            if (res.code === 200) {
                isSend.value = true
                countdownTime.value = 60
                message.success('已向绑定邮箱发送邮件')
                let timer = setInterval(() => {
                    countdownTime.value--;
                    if (countdownTime.value < 1) {
                        clearInterval(timer)
                        countdownTime.value = 0
                        isSend.value = false
                    }
                }, 1000)
            } else {
                message.error('账号验证失败')
            }
        })
    }
}

const submit = (dom) => {
    dom.validate((isTrue) => {
        if (isTrue) {
            request.post("/store/loginUser", checkAdmin).then(response => {
                if (response.code === 200) {
                    store.setLocalStorage("rsms-token", response.data.token)
                    store.setLocalStorage("userMain",response.data)
                    router.push("/goods")
                } else {
                    console.log(response)
                    message.warning(response.message);
                    return Promise.reject("登陆失败")
                }
            })
        } else {
            console.log("格式有误")
        }
    })
}

const reset = (dom) => {
    console.log(dom)
    return dom.resetFields()
}

</script>
<style scoped>

</style>